<template>
    <Center>
        <div class="p-8 flex flex-col" style="height: 100%;">
            <div class="basis-1/3 pb-3">
                <el-row style="height:100%;">
                    <el-col :span="5" class="flex justify-center items-center ">
                        <el-image :src="baseUrl + songsList.image" class="rounded" style="width:220px;height:220px;" />
                    </el-col>
                    <el-col :span="19" class="p-3">
                        <div class="">
                            <el-space v-if="songsList.title">
                                <div class="border-2 border-blue-300 text-blue-300 pl-1 pr-1">歌单</div>
                                {{ songsList.title }}
                            </el-space>
                        </div>
                        <div class="mt-4 text-sm text-gray-500">
                            <el-space>
                                <el-image :src="baseUrl + songsList.user?.avatar" style="width:30px;height:30px;"
                                    class=" rounded-full" />
                                <span>{{ songsList.user?.name }}</span>
                                <span>{{ songsList.create_time }}创建</span>
                            </el-space>
                        </div>
                        <div class="mt-4">
                            <el-space>
                                <el-button type="primary" class="bg-blue-500" :icon="CaretRight">播放全部</el-button>
                                <el-button :icon="Share">分享</el-button>
                                <el-button :icon="Download">下载全部</el-button>
                            </el-space>
                        </div>
                        <div class="mt-4 text-sm text-gray-500">
                            <el-space>
                                <span>歌曲：{{ songsList.list?.length }}</span>
                                <span>播放：{{ songsList.views }}</span>
                            </el-space>
                        </div>
                        <div class="mt-4 text-sm text-gray-500">
                            简介：{{ songsList.desc }}
                        </div>
                    </el-col>
                </el-row>
            </div>
            <el-tabs v-model="tab" class="grow">
                <el-tab-pane label="歌曲列表" name="歌曲列表">
                    <el-table class="" :data="tableData" stripe style="width: 100%" @row-click="onClick">
                        <el-table-column prop="index" label="序号" />
                        <el-table-column prop="title" label="歌名" />
                        <el-table-column prop="bpm" label="BPM" />
                        <el-table-column prop="duration" label="时长" />
                        <el-table-column prop="auther" label="发布者" />
                        <el-table-column prop="price" label="售价" />
                        <el-table-column prop="caozuo" label="操作" width="180" />
                    </el-table>
                </el-tab-pane>
                <el-tab-pane :label="labelVal" name="评论">
                    <el-row v-for="(item, index) in songsCommentInfo.data" class="mb-3" :name="key">
                        <el-col :span="1" class="flex justify-start">
                            <el-image :src="baseUrl + item.user?.avatar" class="rounded-full" style="width:40px;height:40px;" />
                        </el-col>
                        <el-col :span="23" class="text-sm text-gray-500" >
                            <div>
                                <el-space>
                                    <span class=" text-blue-500">{{ item.user?.name }}</span>
                                    <span>{{  item.create_time }}</span>
                                </el-space>
                            </div>
                            <div class="text-gray-400 text-xs mt-1">{{ item.content}}</div>
                        </el-col>
                    </el-row>
                </el-tab-pane>
            </el-tabs>
        </div>
    </Center>
</template>
<script setup>
import { ref, computed, onMounted, watch } from "vue";
import test from "@/assets/imgs/1.webp";
import { CaretRight, Share, Download } from '@element-plus/icons-vue'
import Center from '../../components/common/Center.vue'
import { useRouter } from 'vue-router';
import { extractIdentifiers } from "@vue/compiler-core";
import { list , add} from '@/components/common/music';
import { songsInfo, musicInfo ,songsCommentList } from "@/http/api";
const { currentRoute } = useRouter();
const route = currentRoute.value;
const baseUrl = import.meta.env.VITE_API_URL;

const tab = ref('歌曲列表');
const songsList = ref([]);
const tableData = ref([]);
const songsCommentInfo = ref([]);
const pages = ref(1);
const labelVal = ref('');
onMounted(() => {
    let songs_id = route.query.id;    
    getUserSongsInfo(songs_id);
    getSongsCommentList(songs_id);
});

const getSongsCommentList = async (e) => {
    //console.log(e)
    const { data } = await songsCommentList({
        songs_id: e,
    });
    songsCommentInfo.value = data.songs_comment
    labelVal.value = "评论(" + data.songs_comment.data?.length + ")" 
} 
const getUserSongsInfo = async (e) => {
    //console.log(e)
    const { data } = await songsInfo({
        id: e,
    });
    songsList.value = data.songs;
    tableData.value = [];
    list.value = [];
    data.songs.list.forEach((item, index) => {
        tableData.value.push({
            index: index + 1,
            image: item.image,
            id: item.id,
            title: item.title,
            bpm: item.user.name,
            duration: item.duration,
            auther: item.user.name,
            price: "￥" + item.price,
            caozuo: ''
        });

        list.value.push({
            name:item.title,
            author:item.user?.name,
            url:baseUrl +item.audio,
            image:baseUrl +item.image,
        })
    });
}


const onClick = function (row) {
    console.log(row)
    getMusicInfo(row)
}
const getMusicInfo = async (e) => {
    const { data } = await musicInfo({
        id: e.id
    });
    const music_list = {name:data.music.title,author:data.music.user?.name,url:baseUrl +data.music.audio,image:baseUrl + data.music.image};
    console.log("123",music_list);
    add(music_list)
}

</script>
<style scoped>
.center-text {
    position: absolute;
    width: 100%;
    height: 100%;
}
</style>